<!--采购计划模块-->
<template>
  <div  style="position: relative;">
    <mmTable ref="mmTable" :mmColumns="columns" :getUrl="url" :updateUrl="updateUrl" :delUrl="delUrl"
             :form="form" :formData="formData" v-on:formDataChange="formDataChange"
             :searchFormData="searchFormData" :searchForm="searchForm" :showColAction=false
             :modalWidth="700"    :beforSave="beforSave" :overrideFlag=false v-on:customForm="customForm">
      <Form slot="searchForm" ref="searchForm" :model="searchFormData" inline :label-width="70"  style="float: left">
        <FormItem label="用户名" prop="">
          <Input v-model="searchFormData.name" type="text" placeholder=""/>
        </FormItem>
      </Form>
      <!--编辑添加模态框-->
      <Form  slot="editForm" :label-width="70" :model="formData" inline ref="editForm" :rules="formValidate">
      </Form>
    </mmTable>
    <Modal title="智能掺配" v-model="refVisible" :mask-closable='false' :width="800">
    <Form ref="myForm" :model="myForm" :label-width="70" >
      <Row>
        <Col :span="12">
        <FormItem label="方案" prop="fangan" style="width:300px">
          <refSelect v-model="myForm.fangan" />
        </FormItem>
        </Col>
        <Col :span="12">
        <FormItem label="仓库" prop="house" style="width:300px">
          <warehouseSel v-model="myForm.house" @input="input"/>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
        <FormItem label="重量" prop="weight" style="width:300px">
          <Input v-model="myForm.weight"/>
        </FormItem>
        </Col>

      </Row>
      <Row>
        <Col :span="24">
        <Table @on-selection-change="onSel"
               :height="300" size="small" border :columns="editTableColumns" :data="editTableData"
               @on-row-click="editTableClick" ref="editTable"/>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
        &nbsp;
        </Col>
      </Row>
    </Form>
    <div slot="footer">
      <Button type="text" @click="cancel">取消</Button>
      <Button type="primary" :loading="submitLoading" @click="next">计算</Button>
    </div>
  </Modal>
    <Modal title="计算结果" v-model="jieguoVisible" :mask-closable='false' :width="1300">

        <Card shadow>
          <div class="box">
            <div class="dynamic"><dynamic style="height: 160px;width: 160px" :up="respData.moistureup" :down="respData.moisturedown" :data="respData.moisture" text="水份"/></div>
            <div class="dynamic"><dynamic style="height: 160px;width: 160px" :up="respData.volatileup" :down="respData.volatiledown" :data="respData.volatile" text="挥发份"/></div>
            <div class="dynamic"><dynamic style="height: 160px;width: 160px" :up="respData.ashup" :down="respData.ashdown" :data="respData.ash" text="灰份"/></div>
            <div class="dynamic"><dynamic style="height: 160px;width: 160px" :up="respData.sup" :down="respData.sdown" :data="respData.s" text="硫份"/></div>
            <div class="dynamic"><dynamic style="height: 160px;width: 160px" :up="respData.vup" :down="respData.vdown" :data="respData.v" text="钒"/></div>
          </div>
        </Card>
        <Card shadow>
          <div class="box">
            <div class="pie"><custompie style="height: 300px;width: 500px" :value="pieData" text=" "/></div>
            <div class="pie"> <Card :bordered="false">
            <p slot="title">价格</p>
              <div v-html="memo">
              </div>
            </Card></div>
          </div>
        </Card>
      <div slot="footer">
        <Button type="text" @click="canceljieguo">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="save">保存</Button>
      </div>
    </Modal>


    <Modal title="查看" v-model="selVisible" :mask-closable='false' :width="800">
          <Table @on-selection-change="onSel"
                 :height="300" size="small" border :columns="selTableColumns" :data="selTableData"/>
      <div slot="footer">
        <Button type="text" @click="cancelSel">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import refSelect from '../components/select/refSelect.vue';
  import warehouseSel from '../components/select/warehouseSelect.vue';
  import { custompie,dynamic} from '_c/charts'
  import mmTable from '../components/mmtable/mmtable.vue';
  import {getHouseMaterial,jisuan,saveResult,getSelItems} from '@/api/busi'
  export default {
    components: {
      mmTable,
      refSelect,
      warehouseSel,
      custompie,
      dynamic
    },
    data () {

      return {
        selTableData:[],
        selVisible:false,
        memo:'',
        respData:{
          moistureup:10.5,
          moisturedown:0,
          moisture:0,
          volatileup:0,
          volatiledown:0,
          volatile:0,
          ashup:0,
          ashdown:0,
          ash:0,
          sup:0,
          sdown:0,
          s:0,
          vup:0,
          vdown:0,
          v:0
        },
        selTableColumns:[
          {title: "入库单号",key: "rkcode",width:200,align:'center'},
          {title: "掺配重量",key: "weight",width:200,align:'center'}
        ],
        columns:[
          {title: "方案编号",key: "billcode",width:200,align:'center'},
          {title: "仓库",key: "housename",width:200,align:'center'},
          {title: "创建人",key: "creatorname",width:200,align:'center'},
          {title: "创建时间",key: "createtime",width:200,align:'center'},
          {title: "水份",key: "moisture",width:200,align:'center'},
          {title: "挥发份",key: "volatile",width:200,align:'center'},
          {title: "硫份",key: "s",width:200,align:'center'},
          {title: "钒",key: "v",width:200,align:'center'},
          {
            title: "操作",
            key: "action",
            width: 200,
            align: "center",
            render: (h, params) => {
              return h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.row);
                    }
                  }
                },
                "查看"
              )
            }
          }
        ],
        tempArray:[],
        editTableColumns:[
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {title: "行号",width:70,align:'center',render: (h, params) => {
            return h('div',{},params.index+1)
          }},
          { title: '入库编号', key: 'rkcode', width: 200, align: 'center' },
          { title: '化验单号', key: 'assayid', width: 200, align: 'center' },
          { title: '仓库', key: 'warehousename', width: 200, align: 'center' },
          { title: '货物', key: 'materialname', width: 200, align: 'center' },
          { title: '总价', key: 'price', width: 200, align: 'center' },
          { title: '单价', key: 'danjia', width: 200, align: 'center' },
          { title: '剩余量', key: 'surplus', width: 200, align: 'center' },
          { title: '入库人', key: 'creatorname', width: 200, align: 'center' },
          { title: '入库时间', key: 'createtime', width: 200, align: 'center' }
        ],
        selections:[],
        curEditRow:-1,
        url:'/Result/getList',
        updateUrl:'/Result/Save',
        delUrl:'/Result/Delete',
        refVisible:false,
        jieguoVisible:false,
        form:{},
        formValidate:{
        },
        formData:{},
        searchForm:{},
        searchFormData:{
          code:'',
          name:''
        },
        datas:{},
        editTableData:[],
        pieData: [
          {value: 335, name: '直接访问'},
          {value: 310, name: '邮件营销'},
          {value: 234, name: '联盟广告'},
          {value: 135, name: '视频广告'},
          {value: 1548, name: '搜索引擎'}
        ],
        barData: {
          Mon: 13253,
          Tue: 34235,
          Wed: 26321,
          Thu: 12340,
          Fri: 24643,
          Sat: 1322,
          Sun: 1324
        },
        myForm:{
          fangan:'',
          house:'',
          weight:''
        },
        submitLoading:false,
        searchFormData:{
          name:""
        },
        searchForm:{}
      }
    },
    mounted () {
      this.form = this.$refs.editForm;
      this.searchForm = this.$refs.searchForm;
    },
    /*方法*/
    methods: {
      formDataChange(data){
        this.formData = data;
        getItems({ pid: data.id }).then(res => {
          if (res.data.code == '200') {
            this.editTableData =res.data.data.data
          }
        });
      },
      addRow(){
        this.editTableData.push({})
        this.curEditRow = this.editTableData.length-1
      },
      delRow(){
        if(this.curEditRow>0 && this.curEditRow<this.editTableData.length){
          this.editTableData.splice(this.curEditRow,1);
        }else{
          if(this.editTableData.length>0){
            this.editTableData.splice(this.editTableData.length-1,1);
          }
        }
        this.curEditRow = -1
      },
      editTableClick(row,index) {
        this.curEditRow = index
      },
      beforSave(){
        var items = [];
        this.editTableData.forEach((row) => {
          for (let attr in row) {
            if (row[attr] === null) {
              row[attr] = "";
            }
          }
          let str = JSON.stringify(row);
          let data = JSON.parse(str);
          items.push(str)
        })

        this.formData.items = "["+items+"]"
        return true;
      },
      customForm(){
        this.$refs.myForm.resetFields();
        this.refVisible = true
      },
      cancel(){
        this.refVisible = false
      },
      next(){
        let that =this;
        this.submitLoading = true;
        if(this.selections.length>0&&this.selections.length<=10){
            if(this.myForm.fangan){
              var items = [];
              this.editTableData.forEach((row) => {
                for (let attr in row) {
                  if (row[attr] === null) {
                    row[attr] = "";
                  }
                }
                let str = JSON.stringify(row);
                let data = JSON.parse(str);
                items.push(data)
              });

              jisuan({
                fangan:that.myForm.fangan,
                house:that.myForm.house,
                weight:that.myForm.weight,
                items:JSON.stringify(items)
              }).then(res => {
                if (res.data.code == 200) {
                  that.respData = res.data.data[1];
                  that.pieData = res.data.data[0];
                  that.memo=res.data.data[2];
                  that.datas=res.data.data[3];

                  that.jieguoVisible=true;
                  that.submitLoading=false;
                }
                }

              )
            }else{
              this.$Message.error("请选择方案")
            }
        }else if(this.selections.length==0){
          this.$Message.error("至少选择一种原料")
        }else if(this.selections.length>=10){
          this.$Message.error("最多选择十种原料")
        }
      },
      input(v){
        this.editTableData=[]

        getHouseMaterial({ houseid:v}).then(res => {
          if (res.data.code == 200) {
              for(let i=0;i<res.data.data.data.length;i++){
                this.editTableData.push({});
               // this.editTableData[i] = res.data.data.data[i]
                this.$set(this.editTableData, [i],res.data.data.data[i])
                this.curEditRow = this.editTableData.length-1
              }
          }
        })
      },
      onSel(v){
          this.selections = v
      },
      canceljieguo(){
        this.jieguoVisible=false;
      },
      save(){
        let items = this.datas.items;
        let str = JSON.stringify(items);
        this.datas.items=str;
        saveResult(this.datas).then(res =>{
           if (res.data.code == 200) {
             this.jieguoVisible=false;
             this.refVisible = false;
             this.$refs.mmTable.init()
           }
         })
      },
      show(row){
          let that =this;
        getSelItems({id:row.id}).then(res =>{
          if (res.data.code == 200) {
            that.selTableData= res.data.data;
          }
        })
        this.selVisible=true;
      },
      cancelSel(){
          this.selVisible=false;
      }
    }
  }
</script>

<style lang="less" scoped>
  .box{
    width: 100%;
    overflow: hidden;
    .dynamic{
      float: left;
      width:20%;
    }
    .pie{
      float: left;
      width:45%;
    }
  }
</style>
